import React, { useEffect, useState } from 'react'
import api from '@/api'
import {
    Space, Table, Tag, Image, Button, Drawer, message,
    Cascader,
    Checkbox,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Card,
    TreeSelect,
    Upload,
    Pagination
} from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
export default function User() {
    useEffect(() => {
        shopList(send)
    }, [])
    const [form] = Form.useForm();
    const [open, setOpen] = useState(false);
    const [isadd, setisadd] = useState(false);
    const [write, setwrite] = useState(false);
    const [list, setlist] = useState([])
    const [data, setdata] = useState({
        username: '',
        nickname: '',
        gender: '',
        phone: '',
        avatar: 'aaa',
        id: 0
    })
    const [send, setsend] = useState({
        pageSize: 3,
        currentPage: 1,
        auth: 3
    })
    const [total, setTotal] = useState()
    const shopList = async (params: any) => {
        const res = await api.user.getUsers(params)
        setlist(res.data.data)
        console.log(res.data);
        setTotal(res.data.recordCount)

    }
    const onClose = () => {
        setOpen(false);
    };

    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }
    const adduser = () => {
        setisadd(true)
        form.setFieldsValue({
            username: "",
            nickname: '',
            gender: '',
            phone: null,
            avatar: '',
            id: null
        });
        setOpen(true);
    }
    async function insertdetail(arg: any) {
        const res = await api.user.getOneInfo(arg)
        console.log(res.data.data[0]);
        setisadd(false)
        setdata({
            username: res.data.data[0].username,
            nickname: res.data.data[0].nickname,
            gender: res.data.data[0].gender,
            phone: res.data.data[0].phone,
            avatar: res.data.data[0].avatar,
            id: res.data.data[0].id
        })
        form.setFieldsValue({
            username: res.data.data[0].username,
            nickname: res.data.data[0].nickname,
            gender: res.data.data[0].gender,
            phone: res.data.data[0].phone,
            avatar: res.data.data[0].avatar,
            id: res.data.data[0].id
        });

        setOpen(true);
    }
    const getDetail = async (arg: any) => {
        insertdetail(arg)
        setwrite(false)
    }

    const setDetail = (arg: any) => {
        insertdetail(arg)
        setwrite(true)

    }
    const deletethis = async (arg: any) => {
        console.log(arg);
        const res = await api.user.deleteUser(arg)
        if (res.data.code == 200) {
            message.success('删除成功')
            shopList(send)
        }
    }
    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    const columns: ColumnsType<DataType> = [
        {
            title: '用户名',
            dataIndex: 'username',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '昵称',
            dataIndex: 'nickname',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '头像',
            dataIndex: 'avatar',
            render: (arg) => {
                return <Image width={50} src={arg}></Image>
            }
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (record) => (
                <label >
                    <Button type="primary" shape="circle" icon={<SearchOutlined />} onClick={() => getDetail(record)} style={{ margin: '0 10px' }}></Button>
                    <Button type="primary" ghost shape="circle" icon={<EditOutlined />} onClick={() => setDetail(record)} style={{ margin: '0 10px' }} />
                    <Button type="primary" danger shape="circle" icon={<CloseOutlined />} onClick={() => deletethis(record)} style={{ margin: '0 10px' }}></Button>
                </label>
            ),
        },
    ]
    async function submit(arg: any) {
        if (isadd) {
            const res = await api.user.addUser({ ...arg, auth: 3 })
            console.log(res.data);
            if (res.data.code == 200) {
                message.success('添加成功')
                setOpen(false)
            }
            shopList(send)
        } else {
            const res = await api.user.updateUser(arg)
            console.log(res.data);
            if (res.data.code == 200) {
                message.success('修改成功')
                setOpen(false)
            }
            shopList(send)
        }

    }
    function pageChange(args: any) {
        shopList({ ...send, currentPage: args })
        setsend({ ...send, currentPage: args })
    }

    return (
        <div>
            <Card>
                {list ?
                    <>
                        <Button style={{ position: 'absolute', right: '10px', zIndex: '2', }} type="primary" danger onClick={adduser} >+</Button>
                        <Table columns={columns} dataSource={list} />
                        <Drawer title="用户" placement="right" onClose={onClose} open={open}>
                            <Form
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 14 }}
                                layout="horizontal"
                                style={{ maxWidth: 600 }}
                                onFinish={submit}
                                form={form}
                            >
                                {
                                    !isadd ? <Form.Item label="编号" name='id'>
                                        <Input disabled={true} />
                                    </Form.Item> : <></>
                                }
                                <Form.Item label="用户名" name='username' >
                                    <Input disabled={!isadd} />
                                </Form.Item>

                                <Form.Item label="昵称" name='nickname'>
                                    <Input value={data.nickname} />
                                </Form.Item>
                                <Form.Item label="性别" name='gender'>
                                    <Radio.Group value={data.gender}>
                                        <Radio value="0"> 男 </Radio>
                                        <Radio value="1"> 女 </Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item label="电话" name='phone'>
                                    <Input value={data.phone} />
                                </Form.Item>
                                <Form.Item label="头像" valuePropName="fileList" getValueFromEvent={normFile}>
                                    <Upload action="/upload.do" listType="picture-card">
                                        <div>
                                            <PlusOutlined />
                                            <div style={{ marginTop: 8 }}>Upload</div>
                                        </div>
                                    </Upload>
                                </Form.Item>
                                {isadd ? <Form.Item >
                                    <Button htmlType='submit'>添加</Button>
                                </Form.Item> : <Form.Item >
                                    {
                                        write ? <Button htmlType='submit'>修改</Button> : <Button onClick={() => { setOpen(false) }}>确定</Button>
                                    }
                                </Form.Item>}


                            </Form>
                        </Drawer>
                        <Pagination total={total} current={send.currentPage} pageSize={send.pageSize} onChange={pageChange}></Pagination>
                    </> : <></>}
            </Card>
        </div>
    )
}
